import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { Menu } from 'antd';
import * as Icon from "@ant-design/icons";

import logo from '../../assets/images/logo.png'
import menuList from '../../config/menuConfig'
import './index.less'

const { SubMenu } = Menu;

// 后台管理的路由组件
class LeftNav extends Component {

  // 获得icon
  geticon = (iconname) => {
    return React.createElement(Icon[iconname])
  }

  // 根据menu的数据数组生成对应的标签数组(使用map + 递归调用)
  // getMenuNodes = (menuList) => {
  //   return menuList.map(item => {
  //     if (!item.children) {
  //       return (
  //         <Menu.Item key={item.key} icon={this.geticon(item.icon)}>
  //           <Link to={item.key}>{item.title}</Link>
  //         </Menu.Item>
  //       )
  //     } else {
  //       return (
  //         <SubMenu key={item.key} icon={this.geticon(item.icon)} title={item.title}>
  //           {this.getMenuNodes(item.children)}
  //         </SubMenu>
  //       )
  //     }
  //   })
  // }

  // 第二种递归生成标签数组（使用reduce）
  getMenuNodes = (menuList) => {
    // 得到当前请求的路由路径
    const path = this.props.location.pathname
    return menuList.reduce((pre, item) => {
      // 向pre添加<Menu.Item>
      if (!item.children) {
        pre.push((
          <Menu.Item key={item.key} icon={this.geticon(item.icon)}>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        ))
      }
      // 向pre添加<SubMenu>
      else {
        // 查找一个与当前路径匹配的子item
        const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
        // 如果存在，说明当前item的子列需要展开
        if (cItem) {
          this.openKey = item.key
        }

        pre.push((
          <SubMenu key={item.key} icon={this.geticon(item.icon)} title={item.title}>
            {this.getMenuNodes(item.children)}
          </SubMenu>
        ))
      }
      return pre
    }, [])
  }

  // 在第一次render之前执行一次，为第一次render渲染准备数据
  componentWillMount() {
    this.menuNodes = this.getMenuNodes(menuList)
  }

  render() {

    // 得到当前请求的路由路径
    let path = this.props.location.pathname
    if (path.indexOf('/product') === 0) {// 当前请求的是商品或起子路由页面
      path = '/product'
    }
    // 得到需要打开菜单项的key
    const openKey = this.openKey

    return (
      <div>
        <div className="left-nav">
          <Link to="/" className="left-nav-header">
            <img src={logo} alt="logo" />
            <h1>硅谷后台</h1>
          </Link>
          {/* <Menu
            mode="inline"
            theme="dark"
          >
            <Menu.Item key="1" icon={<PieChartOutlined />}>
              <Link to='/home'>首页</Link>
            </Menu.Item>
            <SubMenu key="2" icon={<MailOutlined />} title="商品">
              <Menu.Item key="2-1"><Link to='/category'>品类管理</Link></Menu.Item>
              <Menu.Item key="2-2"><Link to='/product'>商品管理</Link></Menu.Item>
            </SubMenu>
            <Menu.Item key="3" icon={<PieChartOutlined />}>
              <Link to='/user'>用户管理</Link>
            </Menu.Item>
            <Menu.Item key="4" icon={<PieChartOutlined />}>
              <Link to='/role'>角色管理</Link>
            </Menu.Item>
            <SubMenu key="5" icon={<MailOutlined />} title="图形图表">
              <Menu.Item key="5-1"><Link to='/charts/bar'>柱形图</Link></Menu.Item>
              <Menu.Item key="5-2"><Link to='/charts/line'>折线图</Link></Menu.Item>
              <Menu.Item key="5-3"><Link to='/charts/pie'>饼图</Link></Menu.Item>
            </SubMenu>
          </Menu> */}
          <Menu
            mode="inline"
            theme="dark"
            selectedKeys={[path]}
            defaultOpenKeys={[openKey]}
          >
            {
              this.menuNodes
            }
          </Menu>
        </div>

      </div>
    )
  }
}

// withRouter高阶组件：
// 包装非路由组件，返回一个新的组件
// 新的组件向非路由组件传递3个属性： /history/location/match
export default withRouter(LeftNav)